<template>
    <div class="cmt-container">
        <h3>发表评论</h3>
        <textarea placeholder="请输入..." maxlength="200px" v-model="content"></textarea>
        <mt-button type="primary" size="large" @click="pullComment">发表评论</mt-button>

        <div class="comList" v-for="(item, index) in comments " :key=index>
            <div class="com-title">
                第{{index+1}}楼&nbsp;&nbsp;用户：{{item.user_name}}&nbsp;&nbsp;发表时间：{{item.add_time | dataForm}}
            </div>
            <div class="com-body">{{item.content?item.content:'该用户很懒，什么也没说'}}</div>
        </div>
        <mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>
    </div>
</template>

<script>

    import { Toast } from "mint-ui";
    export default {

        data(){
            return {
                pageIndex:1,
                comments: [],
                floor:'',
                content:''
            }
        },
        created(){
          this.getComments()
        },
        methods: {

            getComments() {
                this.$http.get("api/getcomments/" + this.id + "?pageindex=" + this.pageIndex).then(result => {
                    if (result.body.status === 0) {
                        // this.comments = result.body.message
                        this.comments = this.comments.concat(result.body.message)
                    }
                })
            },
            getMore(){
                this.pageIndex++;
                this.getComments()
            },
            pullComment(){
                if(!this.content){
                  return  Toast('评论内容不能为空');
                }
                this.$http.post("api/postcomment/"+this.id,{content:this.content}).then(result => {
                    if(result.body.status === 0){
                        let newCom ={
                            new_name:"匿名用户",
                            add_time:new Date(),
                            content:this.content
                        }
                        this.comments.unshift(newCom)
                        this.content=''
                    }
                })
            }
        },
        props:["id"]

    }

</script>

<style lang="stylus">
    .cmt-container
        h3
            font-size: 18px
        textarea
            font-size 14px
            margin-bottom: 0;
        .comList
            line-height: 30px;
            font-size 14px
            font-weight normal
        .com-title
            line-height: 30px;
            background-color: #ccc;
            line-height 30px
        .com-body
            text-indent 2em
            line-height 35px
</style>